<template>
  <!-- 评论列表 -->
  <div class="comment-list">
    <div>
      <div style="margin-top: 15px;">
        <textarea
          autocomplete="off"
          placeholder="请输入内容"
          class="el-textarea__inner"
          style="resize: none;min-height: 33px;height: 33px;"
        v-model="comment"
        ></textarea>
      </div>
      <div class="reply-btn" @click="commentfun">
        <el-button type="primary">评论</el-button>
      </div>
    </div>
    <div>
      <div class="comment-item" v-for="(item,index) in commentlist" :key="index">
        <div class="left">
          <div class="img">
            <div class="img-box">
              <img
                width="40"
                src="https://n4-q.mafengwo.net/s11/M00/64/81/wKgBEFsmE0WAPbqnAAAOwSUlOKY63.jpeg?imageMogr2%2Fthumbnail%2F%2196x96r%2Fgravity%2FCenter%2Fcrop%2F%2196x96%2Fquality%2F90"
                alt
              />
            </div>
            <div class="name">
              <p class="nick">{{item.account.nickname}}</p>
              <p class="user-level">LV.8</p>
            </div>
          </div>
          <div>2020-9-10</div>
        </div>
        <div class="right">
          <div>
            <div></div>
            <div>{{item.content}}</div>
            <div class="reply-box">
              <div class="reply-input">
                <div style="margin-top: 15px;">
                  <textarea
                    autocomplete="off"
                    placeholder="请输入内容"
                    class="el-textarea__inner"
                    style="resize: none;min-height: 33px;height: 33px;"
                  ></textarea>
                </div>
              </div>
              <div class="reply-btn">
                <el-button type="primary">回复</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async mounted() {
    const res = await this.$axios.get("/hotels/comments", {
      params: {
        hotel: this.$route.query.id,
        _limit: 20
      }
    });
    console.log(res);
    
    this.commentlist = res.data.data;
  },
  data() {
    return {
      textarea1: "",
      commentlist: [],
      comment:''
    };
  },
  
  methods: {
    bigfun() {
      console.log(this.$el);

      this.$el.querySelector(".el-textarea__inner").style.height = "84px";
    },
    samllfun() {
      this.$el.querySelector(".el-textarea__inner").style.height = "33px";
    },
   async commentfun(){
         if (!this.$store.state.user.token) {
        // 获取当前页面的url  完整
        const { fullPath } = this.$route;
        // 将url 设置进  vuex中
        this.$store.commit("page/setSourceURL", fullPath);
        this.$router.push("/user/login");
      }
    //   发表评论
       const res=await this.$axios.post('comments',{content:this.comment,hotel:this.$route.query.id},{
            headers: {
            // "Content-Type": "application / json",
            Authorization: "Bearer " + this.$store.state.user.token,
          },
       })
    //    清空内容
    this.comment=''
    }
  }
};
</script>

<style lang="less" scoped>
.comment-item {
  border-top: 1px dashed #eee;
  padding: 20px 0;
  margin-top: 10px;
  display: flex;
  .left {
    width: 110px;

    .img {
      display: flex;
      .img-box {
        width: 100%;
        float: left;
        img {
          display: inline-block;
          border-radius: 50%;
          border: 2px solid #fa3;
        }
      }
      .name {
        width: 100%;
        float: left;
        box-sizing: border-box;

        .nick {
          color: #fa3;
        }
        .user-level {
          font-size: 12px;
          color: #f30;
          margin-top: 6px;
        }
      }
    }
  }
  .right {
    overflow: hidden;
    flex: 1;
    /deep/ .el-input__inner {
      overflow-y: visible;
      max-height: 84px;
    }

  }
}
    .reply-btn {
      text-align: right;
      //   display: none;
      margin-top: 10px;
    }
</style>